<template>
  <div class="appEdit detailView pd-20">
    <el-form :model="item"
             label-position="right"
             label-width="120px"
             :rules="rules"
             ref="form">
      <el-form-item label="名称"
                    prop="name">
        <el-input v-model="item.name"
                  type="text"
                  placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="版本名称"
                    prop="versionName">
        <el-input v-model="item.versionName"
                  type="text"
                  placeholder="请输入版本名称" />
      </el-form-item>
      <el-form-item label="版本编号"
                    prop="versionCode">
        <el-input-number v-model="item.versionCode"
                         placeholder="请输入版本编号"
                         :controls="false"></el-input-number>
      </el-form-item>

      <el-form-item label="是否强制升级"
                    prop="forcibly">
        <el-select v-model="item.forcibly"
                   filterable
                   clearable
                   class="w-200"
                   placeholder="请选择是否强制升级">
          <el-option v-for="(forcibly, index) in forciblyList"
                     :value="forcibly.code"
                     :label="forcibly.name"
                     :key="index">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="APP类型"
                    prop="type">
        <el-select v-model="item.type"
                   filterable
                   clearable
                   class="w-200"
                   placeholder="请选择APP类型">
          <el-option v-for="(type, index) in typeList"
                     :value="type.code"
                     :label="type.name"
                     :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户类型"
                    prop="userType">
        <el-select v-model="item.userType"
                   filterable
                   clearable
                   class="w-200"
                   placeholder="请选择用户类型">
          <el-option v-for="(userType, index) in userTypeList"
                     :value="userType.code"
                     :label="userType.name"
                     :key="index">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发布状态">
        <el-select v-model="item.publishStatus"
                   filterable
                   clearable
                   class="w-200"
                   placeholder="请选择发布状态">
          <el-option v-for="(userType, index) in publishStatusList"
                     :value="userType.code"
                     :label="userType.name"
                     :key="index">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="全量升级包"
                    prop="url">
        <uploadApk ref="uploadApk"
                   :fileUploadAction="fileUploadAction"
                   :url="item.url"
                   @setUrl="setUrl"></uploadApk>
      </el-form-item>
      <el-form-item label="全量包大小">
        {{item.fileSize}}
      </el-form-item>
      <el-form-item label="增量升级包">
        <uploadApk ref="uploadApk"
                   :fileUploadAction="fileUploadAction"
                   :url="item.incrementUrl"
                   @setUrl="setIncrementUrl"></uploadApk>
      </el-form-item>
      <el-form-item label="增量包大小">
        {{item.incrementFileSize}}
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="item.remark"
                  type="textarea"
                  :rows="4" />
      </el-form-item>
    </el-form>
    <div class="operationView">
      <el-button type="primary"
                 @click="handleCancle">取 消</el-button>
      <el-button type="primary"
                 @click="handleSave">保 存</el-button>
    </div>
  </div>
</template>

<script>
  import { appMgt } from '@/api/codeName'
  import UploadApk from '@/base/upload/uploadApk'

  export default {
    name: "appEdit",
    data () {
      return {
        item: {
          id: 0,
          name: '',
          versionName: '',
          versionCode: undefined,
          fileSize: '',
          incrementFileSize: '',
          incrementUrl: '',
          type: '',
          url: '',
          remark: '',
          userType: '',
          forcibly: '',
          publishStatus: null
        },
        fileUploadAction: this.api.file.upload,
        typeList: appMgt.type,
        userTypeList: appMgt.userType,
        forciblyList: appMgt.forcibly,
        publishStatusList: appMgt.publishStatusList,
        rules: {
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' }
          ],
          versionName: [
            { required: true, message: '请输入版本名称', trigger: 'blur' }
          ],
          versionCode: [
            { required: true, message: '请输入版本编号', trigger: 'blur' }
          ],
          forcibly: [
            { required: true, message: '请选择是否强制更新', trigger: 'change' }
          ],
          type: [
            { required: true, message: '请选择APP类型', trigger: 'change' }
          ],
          userType: [
            { required: true, message: '请选择用户类型', trigger: 'change' }
          ],
          url: [
            { required: true, message: '请选择上传文件', trigger: 'blur' }
          ]
        },
      }
    },
    mounted () {
      if (this.$route.query.id) {
        this._getViewById();
      }
    },
    methods: {
      handleCancle () {
        this.$router.back(-1);
      },
      handleSave () {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            let obj = Object.assign({}, this.item);
            this.post(this.api.appUpgradeEdit.url, obj).then(res => {
              if (res.data.code === '200') {
                this.$message.success('保存成功');
                this.handleCancle();
              }
            });
          }
        })
      },
      setUrl (file) {
        if (file.response.code === '200') {
          this.item.url = file.response.object[0];
          this.item.fileSize = file.size ? `${(file.size / 1024).toFixed(2)} KB` : '0KB'
          this.$message.success('上传成功!');
        } else {
          this.$message.error(file.response.message);
        }
      },
      setIncrementUrl (file) {
        if (file.response.code === '200') {
          this.item.incrementUrl = file.response.object[0];
          this.item.incrementFileSize = file.size ? `${(file.size / 1024).toFixed(2)} KB` : '0KB'
          this.$message.success('上传成功!');
        } else {
          this.$message.error(file.response.message);
        }
      },
      _getViewById () {
        this.post(this.api.appUpgradeView.url, { id: this.$route.query.id }).then(res => {
          if (res.data.code === '200') {
            this.item = res.data.object;
          }
        });
      }
    },
    components: {
      UploadApk
    }
  }
</script>

<style lang="scss" >
</style>
